<template>
  <view>
    <view class="cu-card">
      <view class="cu-item shadow">
        <view class="margin-left margin-top margin-bottom-sm text-xl" @click="popupTypeModal">
          {{type.name}}<text class="cuIcon-triangledownfill text-xxl"></text>
        </view>
        <view class="text-lg padding-sm solids-bottom">
          <picker mode="date" :value="date" :end="endDate" @change="changeDate">
            <view class="flex align-center justify-between">
              <view>
                <text class="cuIcon-timefill margin-right-xs"></text>{{date}}
              </view>
              <view class="text-grey text-df">
                <text class="cuIcon-order margin-right-xs"></text>切换日期
              </view>
            </view>
          </picker>
        </view>

        <view class="flex align-center solid-bottom justify-between padding-sm" v-if="type.type === 'user'" v-for="m in members">
          <view class="flex align-center flex-sub">
            <view class="cu-avatar round" :style="'background-image:url(' + m.avatarUrl + ');'"></view>
            <view class="margin-left-xs">{{m.nickName}}</view>
          </view>
          <view class="flex-sub flex justify-center">
            注册成功
          </view>
          <view class="flex-sub flex justify-end">
            {{parseMin(m.createdAt)}}
          </view>
        </view>

        <view class="flex align-center solid-bottom justify-between padding-sm" v-if="type.type === 'home'" v-for="h in homes">
          <view class="flex align-center flex-sub">
            <view class="cu-avatar round" :style="'background-image:url(' + h.avatarUrl + ');'"></view>
            <view class="margin-left-xs">{{h.nickName}}</view>
          </view>
          <view class="flex-sub flex justify-center">
            创建纪念馆
          </view>
          <view class="flex-sub flex justify-end">
            {{parseMin(h.createdAt)}}
          </view>
        </view>

        <view class="flex align-center solid-bottom justify-between padding-sm" v-if="type.type === 'order'" v-for="o in orders">
          <view class="flex align-center flex-sub">
            <view class="cu-avatar round" :style="'background-image:url(' + o.avatarUrl + ');'"></view>
            <view class="margin-left-xs">{{o.nickName}}</view>
          </view>
          <view class="flex-sub flex justify-center">
            {{o.payAmount == 0 ? '普通订单' : '付费订单'}}
          </view>
          <view class="flex-sub flex justify-end">
            {{parseMin(o.createdAt)}}
          </view>
        </view>

        <view class="flex align-center solid-bottom justify-between padding-sm" v-if="type.type === 'income'" v-for="i in incomes">
          <view class="flex-sub flex align-center">
            <view class="cu-avatar round" :style="'background-image:url(' + i.avatarUrl + ');'"></view>
            <view class="margin-left-xs">{{i.nickName}}</view>
          </view>
          <view class="flex-sub">
            <view class="text-lg text-red flex align-center justify-center">+ {{i.amount}}￥</view>
            <view class="text-grey text-sm flex align-center justify-center">{{i.type === 1 ? '付费祭扫' : '许愿墙消费'}}</view>
          </view>
          <view class="flex-sub flex justify-end">
            {{parseMin(i.createdAt)}}
          </view>
        </view>

        <view class="text-center padding-xs text-gray">
          没有更多了~
        </view>
      </view>
    </view>

    <view class="cu-modal" :class="showTypeModal?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end solid-bottom">
          <view class="content">选择数据类型</view>
          <view class="action" @tap="closeTypeModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view style="width: 100%;">
          <radio-group @change="chooseDailyType" style="width: 100%;">
            <view class="cu-form-group" v-for="t in types">
              <view class="title">{{t.name}}</view>
              <radio class='radio green' :class="t.type==type.type?'checked':''" :checked="t.type==type.type" :value="t.type"></radio>
            </view>
          </radio-group>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import {parseTime} from '@/utils/date'
import {request} from "../../utils/request";

export default {
  name: 'daily',
  data() {
    return {
      date: parseTime(new Date(), '{y}-{m}-{d}'),
      endDate: parseTime(new Date(), '{y}-{m}-{d}'),
      pageNum: 1,
      pageSize: 100,
      type: {},
      showTypeModal: false,
      types: [{
        name: '用户数据',
        type: 'user'
      },{
        name: '订单数据',
        type: 'order'
      },{
        name: '纪念馆数据',
        type: 'home'
      },{
        name: '收益数据',
        type: 'income'
      }],
      members: [],
      homes: [],
      orders: [],
      incomes: []
    }
  },
  onLoad(params) {
    this.type = this.types.find(t => t.type === params.type)
    this.listData(this.type.type)
  },
  methods: {
    popupTypeModal() {
      this.showTypeModal = true
    },
    closeTypeModal() {
      this.showTypeModal = false
    },
    chooseDailyType(val) {
      this.type = this.types.find(t => t.type === val.detail.value)
      this.closeTypeModal()
      this.listData(this.type.type)
    },
    changeDate(val) {
      console.log(val)
      this.date = val.detail.value
      this.listData(this.type.type)
    },
    parseMin(time) {
      return parseTime(time, '{h}:{i}:{s}')
    },
    listData(type) {
      if (type === 'income') {
        this.listAgentIncomes()
      } else if (type === 'user') {
        this.listAgentMembers()
      } else if (type === 'home') {
        this.listAgentHomes()
      } else if (type === 'order') {
        this.listAgentOrders()
      }
    },
    listAgentIncomes() {
      request({url: '/agent/incomes?pageNum=' + this.pageNum +'&pageSize='+ this.pageSize + '&currentDate=' + this.date}).then(res => {
        this.incomes = res.list
      })
    },
    listAgentMembers() {
      request({url: '/agent/members?pageNum=' + this.pageNum +'&pageSize='+ this.pageSize+ '&currentDate=' + this.date}).then(res => {
        this.members = res.list
      })
    },
    listAgentHomes() {
      request({url: '/agent/homes?pageNum=' + this.pageNum +'&pageSize='+ this.pageSize+ '&currentDate=' + this.date}).then(res => {
        this.homes = res.list
      })
    },
    listAgentOrders() {
      request({url: '/agent/orders?pageNum=' + this.pageNum +'&pageSize='+ this.pageSize+ '&currentDate=' + this.date}).then(res => {
        this.orders = res.list
      })
    }
  }
}
</script>
